<template>
  <div class="mc-main">
    <UserCenter />
    <ul class="lsnone sc-display pbm0 mgt20p w100">
      <li
        v-for="(item, index) in state.tabList"
        :key="index"
        :class="[
          'lsnone',
          'dp-ib',
          'pbm0',
          'w80p',
          'h40p',
          'lh-40p',
          item.en === state.currentTab ? 'bc1' : 'bc3',
        ]"
        @click="fnChangeTab(item.en)"
      >
        {{ item.name }}
      </li>
      <li
        class="add-question lsnone dp-ib pbm0 w40p h40p lh-40p br20p bc3"
        @click="$emit('addquestion-dialog', true)"
      >
        +
      </li>
    </ul>
    <keep-alive>
      <component
        v-bind:is="currenTab"
        @question-detailm="fnViewQuestion"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
import { reactive, computed } from "vue";
import UserCenter from "./UserCenter.vue";
import MyTabwait from "./MyTabWait.vue";
import MyTabyes from "./MyTabYes.vue";
import MyTabno from "./MyTabNo.vue";

export default {
  // 子组件
  components: {
    UserCenter,
    MyTabwait,
    MyTabyes,
    MyTabno,
  },
  // 父组件传值
  props: {
    msg: Object,
  },
  // 事件注册
  emits: ["view-question", "addquestion-dialog"],
  // 钩子
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      currentTab: "wait",
      tabList: [
        { id: "1", name: "待审核", en: "wait" },
        { id: "2", name: "已通过", en: "yes" },
        { id: "2", name: "已拒绝", en: "no" },
      ],
    });
    // 内容切换
    const currenTab = computed(() => {
      return "MyTab" + state.currentTab;
    });
    // tab切换
    const fnChangeTab = (val) => {
      state.currentTab = val;
    };
    // 查看问题
    const fnViewQuestion = (val) => {
      emit("view-question", val);
    };
    // 传入模板
    return {
      state,
      currenTab,
      fnChangeTab,
      fnViewQuestion,
    };
  },
};
</script>

<style scoped>
.mc-main {
  width: 100%;
  min-height: 300px;
}
.mc-main ul {
  position: relative;
  border-bottom: 5px solid rgba(29, 96, 151, 0.45);
}
.mc-main li:hover {
  cursor: pointer;
}

.add-question {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
